<!DOCTYPE html>
<style>
#target {
    height: 100px;
    width: 100px;
    border: solid blue 0px;
    animation-duration: 10s;
    animation-timing-function: cubic-bezier(0,-1,1,-1);
    animation-name: anim;
}
@keyframes anim {
    from {
        border-top-width: 0px;
        outline-width: 0px;
        column-count: 1;
        column-rule-width: 0px;
    }
    to {
        border-top-width: 10px;
        outline-width: 10px;
        column-count: 10;
        column-rule-width: 10px;
    }
}
</style>
<script src="resources/animation-test-helpers.js"></script>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

const expectedValues = [
  // [time, element-id, property, expected-value, tolerance]
  [5, 'target', 'border-top-width', 0, 0],
  [5, 'target', 'outline-width', 0, 0],
  [5, 'target', 'column-count', 1, 0],
  [5, 'target', 'column-rule-width', 0, 0],
];

runAnimationTest(expectedValues);
</script>
<body>
Tests that interpolation of unsigned values does not underflow when a timing
function produces values outside the range 0-1.
<div id="target"></div>
